<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>商品管理</cite></a>
    <a><cite>添加肓盒</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card" style="height: 1000px">
    <div class="layui-card-body" style="padding-top: 40px;">
      <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
        <div carousel-item style="height: 1000px">
          <div>
            <form class="layui-form" style="margin: 50px auto;max-width: 700px;">
              <script type="text/html" template lay-done="layui.data.done()">
                {{# let data = {}; }}
                <div class="layui-form-item">
                  <label class="layui-form-label">所属门店</label>
                  <div class="layui-input-inline">
                    <select name="store_id" lay-filter="store_id">
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">肓盒名称</label>
                  <div class="layui-input-inline" style="width: 300px">
                    <input name="name" type="text" lay-verify="required" class="layui-input" value=""/>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">销售价格</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="display_price"
                             value="{{d.params.display_price || ''}}">
                    </div>
                    <div class="layui-input-inline">
                      <input type="checkbox" name="show_left_count" lay-skin="switch"
                             lay-text="显示实时库存|不显示实时库存" checked>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">限购数量</label>
                    <div class="layui-input-inline" style="width: 50px">
                      <input type="text" class="layui-input" lay-verify="required" name="buy_limit"
                             value="{{d.params.buy_limit || 1}}">
                    </div>
                    <div class="layui-input-inline layui-word-aux layui-form-mid">
                      -1代表不限制
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                      <input type="text" id="start_time" class="layui-input" name="start_time"
                             placeholder="默认上架时开始"
                             autocomplete="off" value="{{d.params.start_time || ''}}">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                      <input type="text" id="end_time" class="layui-input" name="end_time" placeholder="默认下架时结束"
                             autocomplete="off" value="{{d.params.end_time || ''}}">
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">发行方</label>
                  <div class="layui-input-inline" style="width: 200px">
                    <input name="issuer" type="text" class="layui-input" value=""/>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label form-required" id="logo_label">封面图片</label>
                  <div class="layui-input-block">
                    <div id="logo_image"></div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formStep1">
                      下一步
                    </button>
                  </div>
                </div>
              </script>
            </form>
          </div>
          <div>
            <script type="text/html" template>
              <form class="layui-form layui-form-pane" style="margin: 50px auto;max-width: 700px;">
                <div class="layui-form-item">
                  <div id="description">{{d.params.description || ''}}</div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                    <button class="layui-btn" lay-submit lay-filter="formStep2">
                      下一步
                    </button>
                  </div>
                </div>
              </form>
            </script>
          </div>
          <div>
            <form class="layui-form layui-form-pane" style="margin: 50px auto;max-width: 700px;">
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-sm" id="btnAddProduct"><i class="layui-icon layui-icon-add-1"></i>添加商品
                </button>
              </div>
              <script type="text/html" id="tpl_add_product">
                <div style="padding-top: 20px">
                  <div class="layui-inline">
                    <div class="layui-form-label">商品名称</div>
                    <div class="layui-input-inline" style="width: 300px">
                      <select name="product_id[]" lay-verify="required" lay-reqtext="请选择商品" lay-verType="tips">
                        <option value="">选择肓盒中的商品</option>
                        {{# layui.each(d.products, function(index, product){ }}
                        <option value="{{product.id}}">{{product.name}} (可用数量: {{product.available_tokens_count}})
                        </option>
                        {{# }) }}
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <div class="layui-form-label">商品数量</div>
                    <div class="layui-input-inline" style="width: 100px">
                      <input type="text" name="quantity[]" lay-verify="required" lay-reqtext="请输入数量"
                             lay-verType="tips" placeholder="" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <div class="layui-btn-group">
                      <a class="btn-delete layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i></a>
                    </div>
                  </div>
                </div>
              </script>
              <div id="product_panel">
              </div>
              <div class="layui-form-item" style="padding-top: 100px">
                <div class="layui-input-block">
                  <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                  <button class="layui-btn" lay-submit lay-filter="formStep3">
                    下一步
                  </button>
                </div>
              </div>
            </form>
          </div>
          <div>
            <div class="layui-form" style="margin: 50px auto;max-width: 700px;">
              <table id="product_queue" lay-filter="product_queue"></table>
              <div class="layui-form-item" style="padding-top: 50px">
                <div class="layui-input-block">
                  <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                  <button id="btn_create" class="layui-btn">
                    创建肓盒
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  layui.data.done = function () {

    layui.use(['step', 'fox_upload', 'laydate', 'wangEditor'], function () {
      let $ = layui.$
        , form = layui.form
        , admin = layui.admin
        , step = layui.step
        , fox_upload = layui.fox_upload
        , laydate = layui.laydate
        , laytpl = layui.laytpl
        , table = layui.table
        , editor = layui.wangEditor


      //加载门店
      admin.get('agent-admin/stores', function (res) {
        layui.each(res.data, function (index, store) {
          let opt = new Option(store.name, store.id);
          $('select[name="store_id"]').append(opt)
        })
        form.render()
      })

      let form_data = {}

      step.render({
        elem: '#stepForm',
        filter: 'stepForm',
        width: '100%', //设置容器宽度
        stepWidth: '750px',
        height: '500px',
        stepItems: [{
          title: '盲盒基础信息'
        }, {
          title: '盲盒详情'
        }, {
          title: '添加肓盒商品'
        }, {
          title: '"出奖"顺序预览'
        }]
      });

      form.render()

      //# STEP 1
      //日历初始化
      laydate.render({
        elem: '#start_time'
        , type: 'datetime'
      });
      laydate.render({
        elem: '#end_time'
        , type: 'datetime'
      });

      //上传控件初始化
      fox_upload.render({
        elem: '#logo_image'
        , url: 'agent-admin/products/image'
        , headers: {
          Authorization: admin.getAccessToken('Bearer')
        }
        , text: '点击上传'
        , name: 'logo_url'
      })

      //编辑器
      editor.render({
        elem: "#description"
        , height: 300
        , name: 'description'
        , url: 'editor/images'
      });

      form.on('submit(formStep1)', function (data) {
        form_data = data.field
        if (!form_data.logo_url) {
          layer.tips('请上传封面图片', $('#logo_label'))
          return false
        }
        form_data.show_left_count = form_data.show_left_count === 'on' ? 1 : 0;
        step.next('#stepForm')
        return false;
      });
      form.on('submit(formStep2)', function (data) {
        if (!data.field.description) {
          layer.tips('请填写盲盒简介', $('#description'));
          return false;
        }
        form_data.description = data.field.description
        step.next('#stepForm')
        loadProducts(form_data.store_id)
        return false;
      });

      //# STEP 2
      //加载可用商品列表
      let products = [];
      let product_count = 2
      let loadProducts = function (store_id) {
        $('#product_panel').empty()
        admin.get('agent-admin/blind_box/available_products?store_id=' + store_id, function (res) {
          products = res.data
          addProductRow()
          addProductRow()
          $('#btnAddProduct').click(function () {
            addProductRow()
            product_count++
            return false;
          })
        })
      }

      $('#product_panel').on('click', '.btn-delete', function () {
        if (product_count <= 2) {
          layer.msg('肓盒中需要保留两至少个商品')
          return;
        }
        let currentRow = $(this).parent().parent().parent()
        currentRow.remove()
        product_count--
      })

      form.on('submit(formStep3)', function (data) {
        let field = data.field
        field.store_id = form_data.store_id
        admin.post('agent-admin/blind_box/queue', data.field, function (res) {
          // form_data.product_ids = JSON.stringify(res.data.product_ids)
          form_data.product_ids = res.data.product_ids.join()
          table.render({
            elem: '#product_queue'
            , data: res.data.product_queue
            , width: 690
            , cols: [[ //表头
              {field: 'sequence', title: '顺序', width: 100}
              , {field: 'name', title: '商品名称', minWidth: 200, align: "left"}
            ]]
            , size: 'sm'
            , page: true
            , even: true
          })
          step.next('#stepForm');
        })
        return false;
      });

      $('.pre').click(function () {
        step.pre('#stepForm');
      });

      // # STEP 3
      // 创建肓盒
      $('#btn_create').click(function () {
        layer.load();
        admin.post('agent-admin/blind_boxes', form_data, function (res) {
          history.back()
        }, {hasLoading: true})
      })

      function addProductRow() {
        let tpl_add_product = $('#tpl_add_product').html()
        $('#product_panel').prepend(laytpl(tpl_add_product).render({products: products}))
        form.render()
      }
    })
  }
</script>
